//账户状态弹窗
import { useState, useEffect, useMemo, useRef } from 'react';
import { Form, Button, Input, Alert, Select, message } from 'antd';
import CommonModal from '@/components/CommonModal';
import CommonLoading from '@/components/CommonLoading';
import { getCurrentUser } from '@/utils/authority';
import { activateAccountSendSms, activateAccount } from './service';

const layout = {
  labelCol: {
    span: 7,
  },
  wrapperCol: {
    span: 13,
  },
};

const AccountState = ({ visible, pingAnAccount, handleCancel, handleOk }) => {

  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [countDown, setCount] = useState(0);

  const stageData = useRef({
    businessNo: undefined,
    otpOrderNo: undefined,
  });

  useEffect(() => {
    if (visible) {
      form.resetFields();
    }
  }, [visible]);

  useEffect(() => {
    if (countDown) {
      setTimeout(() => {
        setCount(countDown - 1);
      }, 1000);
    }
  }, [countDown]);

  const renderFooter = useMemo(() => {
    if (pingAnAccount.status == 1) {
      return (
        <>
          <Button onClick={() => handleCancel()} key="ok" type="primary">
            知道了
          </Button>
        </>
      );
    } else {
      return (
        <>
          <Button key="cancel" onClick={() => handleCancel()}>
            取消
          </Button>
          <Button key="ok" onClick={() => onOk()} type="primary">
            确定
          </Button>
        </>
      );
    }
  }, [pingAnAccount]);

  //获取验证码
  const handleGetCode = async (val) => {
    setLoading(true);
    setCount(59);
    const res = await activateAccountSendSms({
      mobile: pingAnAccount.mobile,
    });
    if (res.success) {
      message.success('验证码发送成功!');
      const { businessNo, otpOrderNo } = res?.data || {};
      stageData.current = { businessNo, otpOrderNo };
    }
    setLoading(false);
  };

  //验证码提交
  const onOk = () => {
    form
      .validateFields()
      .then(async (val) => {
        setLoading(true);
        const { success, data } = await activateAccount({
          ...stageData.current,
          smsCode: val.smsCode,
          mobile: pingAnAccount.mobile,
        });
        if (success) {
          if (data == 1) {
            message.success('激活成功！');
            handleOk();
          }
        } else {
          setLoading(false);
        }
      })
      .catch(() => {});
  };

  return (
    <CommonModal
      title="账户状态"
      visible={visible}
      onOk={onOk}
      onCancel={handleCancel}
      footer={renderFooter}
      minHeight={pingAnAccount.status == 1 ? '' : '200px'}
    >
      {pingAnAccount.status == 1 ? (
        <p>您之前已有二类户账户，账户处于“异常”状态，需要去柜面处理。</p>
      ) : (
        <>
          <p
            style={{
              fontSize: '15px',
              padding: '6px 0 8px 16px',
              marginBottom: '16px',
            }}
          >
            您之前已有二类户账户，账户已半年无交易，鉴于银行监管要求，需要重新激活
          </p>
          <Form name="get-phone-code" form={form} {...layout}>
            <Form.Item label="手机号">
              <div className="flex">
                <span>
                  {getCurrentUser().mobile
                    ? getCurrentUser().mobile.replace(
                        getCurrentUser().mobile.substring(3, 7),
                        '****'
                      )
                    : ''}
                </span>
                <Button
                  style={{ marginLeft: 24 }}
                  onClick={() => handleGetCode()}
                  disabled={countDown}
                >
                  获取验证码{countDown ? `(${countDown})` : ''}
                </Button>
              </div>
            </Form.Item>

            <Form.Item
              label="手机验证码"
              name="smsCode"
              rules={[{ required: true, message: '请输入手机验证码' }]}
            >
              <div className="flex">
                <Input />
              </div>
            </Form.Item>
          </Form>
        </>
      )}

      <CommonLoading loading={loading} />
    </CommonModal>
  );
};

export default AccountState;
